<template>
  <div>
    <div class="vote-message">
      <div class="vote-from">
        <div class="vheader">
          <p>
            {{ answer_mode == 1 ? '[多选投票]' : '[单选投票]' }}
            <el-icon style="top:3px" size="14px" title="刷新投票结果" @click="loadRefresh" v-show="is_vote" :class="['pointer', refresh ? 'is-loading' : '']">
              <template v-if="refresh">
                <ele-Loading />
              </template>
              <template v-else>
                <ele-Refresh />
              </template>
            </el-icon>
          </p>
          <p>{{ title }}</p>
        </div>

        <template v-if="is_vote">
          <div class="vbody">
            <div class="vote-view" v-for="option in options" :key="option.id">
              <p class="vote-option">{{ option.value }}. {{ option.text }}</p>
              <p class="vote-census">
                {{ option.num }} 票 {{ option.progress }}%
              </p>
              <p class="vote-progress">
                <el-progress
                  :show-text="false"
                  :percentage="parseInt(option.progress)"
                />
              </p>
            </div>
          </div>
          <div class="vfooter vote-view">
            <p>应参与人数：{{ answer_num }} 人</p>
            <p>实际参与人数：{{ answered_num }} 人</p>
          </div>
        </template>
        <template v-else>
          <div class="vbody" >
            <p class="option" :class="{ 'option-radio': answer_mode == 0 }" v-for="(option, index) in options" :key="option.id">
              <el-checkbox
                v-model="option.is_checked"
                @change="toSelect2(option)"
              />
              <span @click="toSelect(option, index)" style="margin-left: 10px;">
                {{ option.value }} 、{{ option.text }}
              </span>
            </p>
          </div>
          <div class="vfooter">
            <el-button plain round @click="toVote">
              {{ isUserVote ? '立即投票' : '请选择进行投票' }}
            </el-button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, reactive, toRefs } from 'vue'
import { useUserInfo } from '/@/stores/userInfo'
import { useChatApi } from '/@/api/chat/index'
export default {
    name: 'VoteMessage',
    props: {
        vote: {
            type: Object,
            required: true
        },
        record_id: {
            type: [Number, String],
            required: true
        }
    },
    setup(props) {
        const { vote, record_id } = toRefs(props)
        const userInfo = useUserInfo()
        const chatApi = useChatApi()
        const state = reactive({
            answer_mode: 0,
            title: '',
            radio_value: '',
            options: [],
            is_vote: false,
            answer_num: 0,
            answered_num: 0,
            refresh: false
        })
        const isUserVote = computed(() => {
            return state.options.some(iten => {
                return iten.is_checked
            })
        })
        const uid = computed(() => {
            return userInfo.websocketInfos.uid
        })
        onMounted(() => {
            let user_id = uid.value
            let { detail, statistics, vote_users } = vote.value
            state.answer_mode = detail.answer_mode
            state.answer_num = detail.answer_num
            state.answered_num = detail.answered_num
            state.title = detail.title
            detail.answer_option.forEach(item => {
                state.options.push({
                    value: item.key,
                    text: item.value,
                    is_checked: false,
                    num: 0,
                    progress: '00.0',
                })
            })
            state.is_vote = vote_users.some(value => {
                return value == user_id
            })
            updateStatistics(statistics)
        })
        const loadRefresh = () => {
            state.refresh = true
            setTimeout(() => {
                state.refresh = false
            }, 500)
        }
        const updateStatistics = (data) => {
            let count = data.count
            state.options.forEach(option => {
                option.num = data.options[option.value]

                if (count > 0) {
                    option.progress = (data.options[option.value] / count) * 100
                }
            })
        }

        const toSelect = (option, index) => {
            if (state.answer_mode == 0) {
                state.options.forEach(option => {
                    option.is_checked = false
                })
            }

            state.options[index].is_checked = !option.is_checked
        }
        const toSelect2 = (option) => {
            if (state.answer_mode == 0) {
                state.options.forEach(item => {
                    if (option.value == item.value) {
                        item.is_checked = option.is_checked
                    } else {
                        item.is_checked = false
                    }
                })
            }
        }
        const toVote = () => {
            if (state.isUserVote == false) {
                return false
            }
            let items = []
            state.options.forEach(item => {
                if (item.is_checked) {
                    items.push(item.value)
                }
            })
            chatApi.ServeConfirmVoteHandle({
                record_id: record_id.value,
                options: items.join(','),
            }).then(res => {
                state.is_vote = true
                updateStatistics(res.data)
            })
        }
        return {
            ...toRefs(state),
            isUserVote,
            loadRefresh,
            toSelect,
            toSelect2,
            toVote
        }
    }
}
</script>

<style lang="scss" scoped>
.vote-message {
  width: 300px;
  min-height: 150px;
  border: 1px solid #eceff1;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;

  .vote-from {
    width: 100%;

    .vheader {
      min-height: 50px;
      background: var(--el-color-primary-light-1);
      padding: 8px;
      position: relative;
      p {
        margin: 3px 0;
        &:first-child {
          color: rgb(245, 237, 237);
          font-size: 13px;
          margin-bottom: 8px;
        }

        &:last-child {
          color: white;
        }
      }

      &::before {
        content: '投票';
        position: absolute;
        font-size: 60px;
        color: white;
        opacity: 0.1;
        top: -5px;
        right: 10px;
      }
    }

    .vbody {
      min-height: 80px;
      width: 100%;
      padding: 5px 15px;
      box-sizing: border-box;

      .option-radio {
        :deep(.el-checkbox__inner) {
          border-radius: 50%;
        }
        :deep(.el-checkbox) {
          top: 2px;
        }
      }

      .option {
        font-size: 13px;
        span {
          cursor: pointer;
          user-select: none;
          line-height: 22px;
        }

        .el-radio {
          margin-right: 0;
          .el-radio__label {
            padding-left: 5px;
          }
        }
      }
      margin-bottom: 10px;
    }

    .vfooter {
      height: 55px;
      text-align: center;
      box-sizing: border-box;

      .el-button {
        width: 80%;
        font-weight: 400;
      }

      &.vote-view {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: 15px;
        p {
          border-left: 2px solid var(--el-color-primary);
          padding-left: 5px;
        }
      }
    }
  }

  .vote-view {
    width: 100%;
    min-height: 30px;
    margin: 15px 0;
    box-sizing: border-box;

    > p {
      margin: 6px 0px;
      font-size: 13px;
    }

    .vote-option {
      min-height: 20px;
      line-height: 20px;
    }

    .vote-census {
      height: 20px;
      line-height: 20px;
    }
  }
}
</style>